<template>
  <div>
    <div class="title">国内疫情地图</div>
    <van-tabs v-model="active" animated @change="change">
      <van-tab title="累计确诊">
        <!-- 为Echarts准备个定义的宽高的dom -->
        <!-- //累计确诊 -->
        <div id="main" style="width: 7.5rem; height: 7rem"></div>
      </van-tab>
      <van-tab title="累计死亡">
        <!-- 现存确诊 -->
        <div id="nowMain" style="width: 7.5rem; height: 7rem"></div>

      </van-tab>

    </van-tabs>

  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      deadArr: []
    }
  },
  methods: {
    change(title) {
      if (title === 1) {
        this.$nextTick(() => {
          this.$myChart.chinaMap('nowMain', [...this.deadArr, { name: '台湾', value: 8994 }, { name: '内蒙古', value: 1 }, { name: '黑龙江', value: 13 }])
        })
      }
    }
  },
  mounted() {
    this.api.getChinaData().then(res => {
      console.log('---', res.data)
      // 获取各省数据
      const citys = res.data.provinceArray
      const arr = [] // 累计
      const deadArr = [] // 死亡
      for (let i = 0; i < citys.length; i++) {
        const obj = {}
        obj.name = citys[i].childStatistic.substring(0, 2) // 省份
        obj.value = citys[i].totalConfirmed // 累计确诊
        arr.push(obj)
        const now = {}
        now.name = citys[i].childStatistic.substring(0, 2) // 省份
        now.value = citys[i].totalDeath // 死亡
        deadArr.push(now)
      }
      this.deadArr = deadArr
      this.$nextTick(() => {
        this.$myChart.chinaMap('main', [...arr, { name: '台湾', value: 4604761 }, { name: '内蒙古', value: 2174 }, { name: '黑龙江', value: 40293 }])
      })
    })
  }
}
</script>

<style lang='less' scoped>
.title {
  margin: 0.2rem;
  padding-top: 1rem;
  border-top: 1px solid #eee;
}
.title::before {
  content: '';
  border-left: 0.1rem solid rgb(9, 60, 202);
  font-size: 0.26rem;
  margin-right: 0.1rem;
}
#main,
#nowMain {
  background: #f5f5f5;
}
</style>
